<template>
  <div class="start-charge">
    <div class="time-box">
      <p>充电时长</p>
      <div class="time"><span>{{ hour }}</span>:<span>{{ minute }}</span>:<span>{{ second }}</span></div>
    </div>
    <div class="charge-info">
      <div class="item">
        <div class="item-left">充电桩编号：</div>
        <div class="item-right">{{ chargePile }}</div>
      </div>
      <div class="item">
        <div class="item-left">地址</div>
        <div class="item-right">北京市昌平区南口镇充电站</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩类型：</div>
        <div class="item-right">60KWH</div>
      </div>
    </div>
    <div class="btn" @click="timeStart">开始充电</div>
    <p class="balance">我的剩余电额：8电币 <span>充值</span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hour: '00',
      minute: '00',
      ms: '00',
      second: '00', //秒
      time: "",
      str: "",
      chargePile: new Date().getTime()
    };
  },
  methods: {
    timeStart() {
        let obj = {
          chargePile: this.chargePile
        }

        this.$router.push({
            path: "/order",
            query: {
                obj
            }
        })
    }
  },
};
</script>

<style lang="sass" scoped>
.start-charge
    width: 100%
    .time-box
        margin-top: .8rem
        text-align: center
        p
            font-size: .24rem
        .time
            margin-top: .3rem
            font-size: .56rem
            font-weight: bold
    .charge-info
        width: 7rem
        margin: .5rem auto 0
        padding: .3rem
        box-sizing: border-box
        border: 1px solid #cdcdcd
        border-radius: 10px
        .item
            display: flex
            justify-content: space-between
            line-height: .6rem
            font-size: .28rem
    .btn
        width: 6rem
        height: .8rem
        margin: .5rem auto
        text-align: center
        line-height: .8rem
        background: #666
        color: #fff
    .balance
        text-align: center
        font-size: .28rem
        span
            padding: .05rem .1rem
            border: 1px solid #cdcdcd
            border-radius: 10px
</style>

